import { getToken, removeToken, setToken } from '@/utils/auth'
import { getInfo, login } from '@/api/user'
import { constantRoutes, resetRouter } from '@/router'

/**
 * @type {import('vuex').Module}
 */
const userStore = {
  namespaced: true, // 开启了命名空间，所以调用的时候需要通过命名空间去调用
  state: {
    token: getToken(), // 1、初始化的时候从本地存储获取token，赋值给vuex
    userInfo: {}, // 用户信息对象
    routes: constantRoutes // 默认只有静态路由
  },
  mutations: {
    /**
     * 写入token
     * @param state
     * @param newToken
     */
    SET_TOKEN(state, newToken) {
      // token的写入逻辑
      state.token = newToken // token写入vuex
      // 2、写入本地存储
      setToken(newToken)
    },
    REMOVE_TOKEN(state) {
      state.token = null
      // 3、从本地存储移除token
      removeToken()
    },
    // 写入用户信息
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    },
    SET_ROUTES(state, newRoutes) {
    //   动态路由和静态路由合并之后复制给routes
      state.routes = [
        ...constantRoutes,
        ...newRoutes
      ]
    }
  },
  //   登录的接口调用会放到actions里面去
  actions: {
    async login(context, data) {
      // 没有登录接口的，所以我先模拟
      const token = await login(data)
      context.commit('SET_TOKEN', token)
    },
    async getUserInfo(context) {
      // 调用获取用户信息接口
      const res = await getInfo()
      context.commit('SET_USER_INFO', res)
      // 获取到的用户信息return出去，调用当前action的地方就可以获取到用户信息
      return res
    },
    logout(context) {
    //   清空信息 token 用户信息
      context.commit('REMOVE_TOKEN')
      context.commit('SET_USER_INFO', {})
      //   路由匹配信息也进行置空
      resetRouter()
    }
  }
}

export default userStore
